<template>
   <div>
      <div class="container ">
         <h2>课次数统计</h2>
         <el-divider></el-divider>
         <el-form class="form-demo">
            <el-form-item label="统计时段">
               <el-radio-group v-model="form.time">
                  <el-radio value="month">月</el-radio>
                  <el-radio value="season">季</el-radio>
                  <el-radio value="year">年</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="查找年份" v-if="form.time != 'year'">
               <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
                  <el-option v-for="year in yearRange" :key="year" :label="year" :value="year" />
               </el-select>
            </el-form-item>
            <el-row v-else>
               <el-col :span="12">
                  <el-form-item label="开始年份">
                     <el-select v-model="form.startYear" placeholder="选择年份">
                        <el-option v-for="year in yearRange" :key="year" :label="year" :value="year">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="结束年份">
                     <el-select v-model="form.endYear" placeholder="选择年份">
                        <el-option v-for="year in yearRange" :key="year" :label="year" :value="year"
                           :disabled="year < form.startYear">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>


            <el-form-item>
               <el-button type="primary" @click="bindConfirm">统计</el-button>
               <el-button @click="cancel">取消</el-button>
            </el-form-item>
         </el-form>
      </div>
      <div ref="chartDom" style="height: 400px;" :class="chartClass"></div>


   </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUpdated,onUnmounted, nextTick } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { statisticsClassCount } from '@/api/statistic'
import * as echarts from 'echarts'
import useYear from '@/hooks/useYear'//
const form = reactive({
   time: 'month',
   year: '2021',
   startYear: '2021',
   endYear: '2024'
})
//动态生成年份
const { yearRange } = useYear()
// 绘制统计图
const chartDom = ref(null)
//绘制课程统计
let chartInstance = ref(null)
const option = reactive({
   // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
   title: {
      text: ''
   },
   tooltip: {},
   legend: {
      data: ['收费']
   },
   xAxis: {
      name: "月",
      data: []  //["1月","2月","3月","4月","5月","6月"]
   },
   yAxis: {
      name: "收费金额"
   },
   series: [{
      name: '收费',
      type: 'bar',
      data: []    //[5, 20, 36, 10, 10, 20]
   }, {
      name: '收费',
      type: 'line',
      data: []     //data: [5, 20, 36, 10, 10, 20]
   }
   ]
})

onMounted(async() => {
   await nextTick()
   // 确保DOM已经渲染完成 
  setTimeout(()=>{
    if (chartDom.value) {
         chartInstance = echarts.init(chartDom.value)
      }
  },500)
  
})

// 销毁ECharts实例
onUnmounted(() => {
   if (chartInstance != null && chartInstance.dispose) {
      chartInstance.dispose();
   }
})

//取消按钮  class属性绑定 当点击取消的时候 设置图标不显示
const chartClass = ref('mt20')
const bindConfirm = () => {
  chartClass.value='mt20'
   //展示统计的列表
   //按照年月分配
   statisticsClassCount(form).then(res => {
      console.log(res)
      const info = res.data.data
      option.title.text = info.title;
      option.xAxis.data = info.time;
      option.xAxis.name = info.xname;
      option.series[0].data = info.data;
      option.series[1].data = info.data;
      chartInstance.setOption(option)
   })
}
//取消按钮
const cancel = () => {
   form.year = "2021"
   form.time = "month"
   // chartInstance.dispose()
   chartClass.value = 'mt20 d'
}
</script >
<style lang="less" scoped>
.mt20{
   margin-top: 20px;
}
.d{
    display: none;
}
.form-demo {
   width: 70%;
   padding-left: 10%;
}

.form-demo .el-select {
   width: 200px;
}
</style>
